<template>
  <div class="map">
    <div v-if="isAddSearch" class="search-box" :style="{'width': width+'px'}">
      <div class="label">地址关键词：</div>
      <el-input v-model="keyword" class="search-input" />
    </div>
    <baidu-map :style="mapStyle" :center="{'lng': longitude, 'lat': latitude}" :zoom="zoom" @ready="handler">
      <!--地图类型，两种：一种是路线一种是绿的那种-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" />
      <!--地图搜索功能，绑定上面的input，-->
      <!--display: none样式很关键，因为下面默认会有地址提示信息很长，很烦，这样搜索会很舒服，-->
      <!--zoom是搜索结果的视图比例，个人觉得12.8很舒服显示-->
      <bm-local-search v-if="isAddSearch" class="search" :keyword="keyword" :auto-viewport="true" zoom="12.8" style="display: none" />
      <!--信息窗口，show属性是控制显示隐藏，infoWindowClose和infoWindowOpen是控制信息窗口关闭隐藏的方法-->
      <bm-marker :position="{'lng': lng, 'lat': lat}" :dragging="dragging" animation="BMAP_ANIMATION_DROP">
        <!--提示信息-->
        <bm-info-window :show="show" style="font-size: 14px" @close="infoWindowClose" @open="infoWindowOpen">
          <p>{{ address }}</p>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script setup>

const props = defineProps({
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 350
  },
  longitude: {
    type: Number,
    default: 119.21699
  },
  latitude: {
    type: Number,
    default: 26.04278
  },
  zoom: {
    type: Number,
    default: 12.8
  },
  dragging: {
    type: Boolean,
    default: true
  },
  isAddSearch: {
    type: Boolean,
    default: true
  },
  defaultAddress: {
    type: String,
    default: ''
  }
})

const lng = ref(props.longitude)
const lat = ref(props.latitude)
const keyword = ref('')
const location = ref('')
const show = ref(false)
const address = ref('')

const mapStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`
}))
const emit = defineEmits(['select-location'])

const handler = ({ BMap, map }) => {
  map.enableScrollWheelZoom(true)
  // 点击事件获取经纬度
  map.addEventListener('click', (e) => {
    show.value = true
    lng.value = e.point.lng
    lat.value = e.point.lat

    const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
    geocoder.getLocation(e.point, (rs) => {
      let a = rs.address
      if (rs.surroundingPois.length > 0) {
        a += rs.surroundingPois[0].title
      }
      address.value = a
      const province = rs.addressComponents.province
      const city = rs.addressComponents.city
      emit('select-location', {
        lng: lng.value,
        lat: lat.value,
        address: address.value,
        province,
        city
      })
    })
  })
}

const infoWindowClose = () => {
  show.value = false
}

const infoWindowOpen = () => {
  show.value = true
}
</script>

<style scoped lang="scss">
    .map{
        position: relative;
        z-index: 999;
    }
    .search-box{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        .label{
            width: 95px;
            color: #888;
        }
        .search-input{
            width: 50%;
            :deep(.el-input__inner){
                height: 30px;
                line-height: 30px;
            }
        }
    }
</style>
